<template>
  <view class="my-order">
    <view class="my-order-mobile">
      <span>手机号</span>
      <input type="text" value="" placeholder="请输入绑定的手机号" placeholder-class="pla" />
    </view>
    <view class="my-order-verify">
      <span>验证码</span>
      <input type="text" value="" placeholder="请输入验证码" placeholder-class="pla" />
      <view type="default" class="btn">发送验证码</view>
    </view>
    <view class="my-order-password">
      <span>输入密码</span>
      <input type="password" value="" placeholder="请输入一个6位数的数字密码" placeholder-class="pla"/>
    </view>
    <view class="my-order-repassword">
      <span>再次输入</span>
      <input type="password" value="" placeholder="请再次输入您设置的密码" placeholder-class="pla" />
    </view>
    <view class="my-order-save"><button type="default">保存</button></view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.my-order {
  // padding-top: 49.5rpx;
  // padding-left: 49.5rpx 23.5rpx 0 23.5rpx;
  .my-order-mobile {
    width: 690rpx;
    height: 80rpx;
    background: #ffffff;
    border: 1rpx solid #c3c3c3;
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    margin-bottom: 22rpx;
    margin-left: 23.5rpx;
    .pla {
      font-size: 26rpx;
      color: #CFCFCF;
    }
    span {
      width: 140rpx;
      margin-left: 23.5rpx;
      font-size: 26rpx;
      color: #333;
    }
  }
  .my-order-verify {
    width: 690rpx;
    height: 80rpx;
    background: #ffffff;
    border: 1rpx solid #c3c3c3;
    border-radius: 5rpx;
    display: flex;
    margin-left: 23.5rpx;
    align-items: center;
    margin-bottom: 22rpx;
    .pla {
      font-size: 26rpx;
      color: #CFCFCF;
    }
    span {
      width: 140rpx;
      margin-left: 23.5rpx;
      font-size: 26rpx;
      color: #333;
    }
    .btn {
      width: 179rpx;
      height: 80rpx;
      background-color: #202029;
      text-align: center;
      line-height: 80rpx;
      color: #ffffff;
      font-size: 26rpx;
    }
  }
  .my-order-password {
    width: 690rpx;
    height: 80rpx;
    margin-bottom: 22rpx;
    background: #ffffff;
    border: 1rpx solid #c3c3c3;
    border-radius: 5rpx;
    display: flex;
    margin-left: 23.5rpx;
    align-items: center;
    .pla {
      font-size: 26rpx;
      color: #CFCFCF;
    }
    span {
      width: 140rpx;
      margin-left: 23.5rpx;
      font-size: 26rpx;
      color: #333;
    }
    input {
      width: 500rpx;
    }
  }
  .my-order-repassword {
    width: 690rpx;
    height: 80rpx;
    margin-bottom: 22rpx;
    background: #ffffff;
    border: 1rpx solid #c3c3c3;
    border-radius: 5rpx;
    display: flex;
    margin-left: 23.5rpx;
    align-items: center;
    .pla {
      font-size: 26rpx;
      color: #CFCFCF;
    }
    span {
      width: 140rpx;
      margin-left: 23.5rpx;
      font-size: 26rpx;
      color: #333;
    }
    input {
      width: 500rpx;
    }
  }
  .my-order-save {
    width: 690rpx;
    height: 80rpx;
    margin-left: 23.5rpx;
    font-size: 30rpx;
    text-align: center;
    line-height: 80rpx;
    background-color: #202029;
    margin-top: 95rpx;
    .pla {
      font-size: 26rpx;
      color: #CFCFCF;
    }
    button {
      background-color: #202029;
      color: #FFFFFF;
    }
  }
}
</style>
